<!DOCTYPE html>
<html lang="zh_CN">
	<head>
		<meta charset="UTF-8">
		<title>新增文章</title>
		<link rel="stylesheet" href="./static/css/bootstrap4.0.min.css" >
		<script src="./static/js/jquery.slim.min.js" ></script>
		<script src="./static/js/popper.min.js" ></script>
		<script src="./static/js/bootstrap4.0.min.js"></script>
		<link href="./static/css/wangEditor.css" rel="stylesheet"/>
		<style>
			  #editor—wrapper {
				border: 1px solid #ccc;
				z-index: 100; /* 按需定义 */
			  }
			  #toolbar-container {
				border-bottom: 1px solid #ccc;
			  }
			  #editor-container {
				height: 500px;
			  }
			.w-e-text-container {
            	height: 66% !important;
        	}
		</style>
	</head>
	<body>
		<div class="container">
			<form action="/admin/content/add" method="post">
				<div class="form-group">
					<label for="title">文章标题</label>
					<input type="text" class="form-control" id="title" name="title" placeholder="文章标题">
				</div>
				<div class="form-group">
					<label for="keywords">关键字</label>
					<input type="text" class="form-control" id="keywords" name="keywords" placeholder="关键字">
				</div>
				<div class="form-group">
					<label for="content">内容</label>
					<div id="toolbar-container"><!--工具栏--></div>
					<div id="editor-container"><!-- 编辑器 --></div>
					<textarea id="content" name="content" style="display: none"></textarea>
				</div>
				<div align="center">
					<button type="submit" style="margin-bottom: 100px; background-color: #AB82FF">
						发表
					</button>
				</div>
			</form>
		</div>

		<script src="./static/js/wangEditor.js"></script>
		<script>
			const {createEditor,createToolbar}=window.wangEditor
			const editorConfig = {
				placeholder: '请从这里开始输入内容...',
				onChange(editor) {
				  const html = editor.getHtml()
				},
				MENU_CONF: {
					// 图片上传配置
					uploadImage: {
						server: '/upload/image', // 上传图片的地址
						// 其他配置项（可选）
						// fieldName: 'file', // 设置文件域名称
						// maxFileSize: 2 * 1024 * 1024, // 文件大小限制（2MB）
						// customInsert(res, insertFn) {
						//     // 自定义插入逻辑
						//     const url = res.data.url;
						//     insertFn(url);
						// }
					},
					// 视频上传配置
					uploadVideo: {
						server: '/upload/video', // 上传视频的地址
						// 其他配置项（可选）
						// fieldName: 'video', // 设置文件域名称
						// maxFileSize: 50 * 1024 * 1024, // 文件大小限制（50MB）
						// customInsert(res, insertFn) {
						//     // 自定义插入逻辑
						//     const url = res.data.url;
						//     insertFn(url);
						// }
					}
				}
			  }

			  const editor = createEditor({
				selector: '#editor-container',
				html: '<p><br></p>',
				config: editorConfig,
				mode: 'default', // or 'simple'
			  })

			  const toolbarConfig = {}

			  const toolbar = createToolbar({
				editor,
				selector: '#toolbar-container',
				config: toolbarConfig,
				mode: 'default', // or 'simple'
			  })
		</script>
	</body>
</html>